<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/detailgood.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header"></div>
    <!-- 中间内容 -->
    <div id="main">
        <!-- main头部 -->
        <div class="mainBox">
            <!-- main头部的第一个部分 -->
            <div class="mainBox-title">
                <span><a href="#">首页</a></span><span>&gt;</span>
                <span><a href="#">白酒</a></span><span>&gt;</span>
                <span><a href="#">茅台</a></span><span>&gt;</span>
                <span class="mainBox_span">43度 茅台飞天 400ml</span>
                <a href="#" class="mainBox-a">在线客服</a>
            </div>
            <!-- main头部的第二个部分 -->
            <div class="mainBox-show">
                <!-- 左边 -->
                <!-- <div class="show_left">
                    <div class="show_left_one">
                        <ul class="show_onebox">
                            <li><img src="./images/show_one01.jpg" alt=""></li>
                            <li><img src="./images/show_one02.jpg" alt=""></li>
                            <li><img src="./images/show_one03.jpg" alt=""></li>
                            <li><img src="./images/show_one04.jpg" alt=""></li>
                            <li><img src="./images/show_one05.jpg" alt=""></li>
                        </ul>
                    </div>
                    <div class="show_oneimg">
                        <img class="middImg" src="./images/show_one001.jpg" alt="">
                        <div class="middleArea"></div>
                    </div>
                    <div id="bigArea" class="bigArea">
                        <img id="bigImg" src="./images/show_one001.jpg" />
                    </div>
                    <div class="show_left_two">
                        <div class="left_two_left">
                            <span>登录分享赢好礼</span>
                            <a href="#"></a>
                            <a href="#"></a>
                            <a href="#"></a>
                        </div>
                        <a href="#" class="scyes"><img src="./images/show_left_btn.jpg" alt="">收藏商品</a>
                    </div>
                </div> -->
                <!-- 中间 -->
                <!-- <div class="show_center">
                    <h3>43 度 茅台飞天 400ml</h3>
                    <p class="show_center_p1">低度飞天 品质依旧</p>
                    <div class="proceBox">
                        <div class="newPriceBox">
                            <p>活动价<span class="newPriceBox_span1">￥</span><span class="newPriceBox_span2">739</span></p>
                            <p class="newPriceBox_p"><span>促销信息</span><span class="newPriceBox_span3">限时抢购</span></p>
                        </div>
                    </div>
                    <div class="upmsg">
                        <div class="transTo">
                            <div class="psz">配送至：</div>
                            <a href="#">
                                <label for="">上海</label>
                            </a>
                            <span class="upmsg_span1">单笔订单不满100元，收运费10元</span>
                            <img src="./images/upmsg01.jpg" alt="">
                            <span>满百包邮</span>
                        </div>
                        <div class="pay">
                            <p>关注度<em>13874</em></p>
                            <p>累计评价<a href="#">1</a href="#"></p>
                            <p class="border_none">送积分<span>739</span></p>
                        </div>
                        <div class="numbox">
                            <div class="count">数量:</div>
                            <div class="numbtn">
                                <input type="text" id="txt" value="1">
                                <div class="btn">
                                    <button class="add">+</button>
                                    <button class="jian">-</button>
                                </div>
                            </div>
                        </div>
                        <div class="btnbox">
                            <a href="#" class="addCat">立即购买</a>
                            <a href="#" class="addToCat"><em></em>加入购物车</a>
                            <div class="apphover"><i></i>手机下单更优惠</div>
                        </div>
                    </div>
                </div> -->
                <!-- 内容 -->
                <a href="#" class="show_right">茅台品牌馆<em>官方自营</em></a>
            </div>
        </div>
        <!-- main第二部分 -->
        <div class="everybodyBox">
            <div class="everybodyTit">大家都在买</div>
            <ul class="everybody-ul">
                <li>
                    <a href="#">
                        <img src="./images/everybody01.jpg" alt="">
                        <span>53度 郎酒 15年 红花郎 500ml</span>
                        <em>￥599</em>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/everybody02.jpg" alt="">
                        <span>53度 郎酒 15年 红花郎 500ml</span>
                        <em>￥599</em>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/everybody03.jpg" alt="">
                        <span>53度 郎酒 15年 红花郎 500ml</span>
                        <em>￥599</em>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/everybody04.jpg" alt="">
                        <span>53度 郎酒 15年 红花郎 500ml</span>
                        <em>￥599</em>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 商品详情部分 -->
        <div class="itemdetailBox">
            <div class="detailtit">
                <span id="twxq" class="detailtit-span1">图文详情</span>
                <span class="detailtit-span2"><a href="#itempjbox1">酒友评价<em>(1)</em></a></span>
            </div>
            <div class="xftopnav">
                <div class="xfnav">
                    <span class="twxqnav">
                        <a href="#twxq">图文详情</a>
                    </span>
                    <span class="jypjnav">
                        <a href="#jypj">酒友评价<em>(30)</em></a>
                    </span>
                    <span class="jiage">￥<em id="xfjg"></em></span>
                    <a href="javascript:void(0)" class="addCar">加入购物车</a>
                </div>
            </div>
            <div class="itemsepc">
                <span><em></em>品牌：茅台</span>
                <span><em></em>品牌：茅台</span>
                <span><em></em>品牌：茅台</span>
                <span><em></em>品牌：茅台</span>
                <span><em></em>品牌：茅台</span>
                <span><em></em>品牌：茅台</span>
                <span><em></em>品牌：茅台</span>
                <span><em></em>品牌：茅台</span>
            </div>
            <div class="itemdiv"></div>
            <div class="picdetail">
                <img class="picdetail01" src="./images/piclogo.jpg" alt="">
                <img src="./images/pic01.jpg" alt="">
                <img src="./images/pic02.jpg" alt="">
                <img src="./images/pic03.jpg" alt="">
                <img src="./images/pic04.jpg" alt="">
                <div class="picdiv">
                    <img class="picdetail02" src="./images/pic05.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="itempjbox" id="itempjbox1">
            <div class="pjtitbox">
                <div class="pltit-left">
                    <h6>商品评价</h6>
                    <div class="pltit-hp">
                        <div class="fill"></div>
                        <em>100%</em><span>好评</span>
                    </div>
                    <p>共一条评价</p>
                </div>
                <div class="pltit-center">
                    <h6>大家认为</h6>
                    <p>暂无标签，快来分享下你的使用心得吧</p>
                </div>
                <div class="pltit-right">
                    <h6>有晒单的评价将获得50积分</h6>
                    <p>积分规则</p>
                </div>
            </div>
            <div class="comment">
                <span id="jypj" class="qbpj comtit">全部评价<em>(1)</em></span>
                <span class="sd comtit">晒单<em>(0)</em></span>
            </div>
            <div class="comment-tab">
                <div class="pjxdbox comcon">
                    <div class="listtitle">
                        <span class="listtitle1">评价心得</span>
                        <span class="listtitle2">满意度</span>
                        <span class="listtitle3">评价用户</span>
                    </div>
                    <li>
                        <div class="pjlistnr">
                            <span class="pjnr">很好</span>
                            <img src="./images/pjimg.jpg" alt="">
                            <div class="pjlistdiv">
                                <h5>银牌酒友</h5>
                                <p>zhanganzhe</p>
                                <span>2020-06-24</span>
                            </div>
                        </div>
                    </li>
                    <div class="laypage">
                        <div class="pahebox">
                            <a href="#">&lt;</a><span>1</span><a href="#">&gt;</a>
                        </div>
                    </div>
                </div>
                <div class="pjxdbox2 comcon">
                    <div class="listtitle">
                        <span class="listtitle1">评价心得</span>
                        <span class="listtitle2">满意度</span>
                        <span class="listtitle3">评价用户</span>
                    </div>
                    <div class="laypage">
                        <div class="pahebox">
                            <a href="#">&lt;</a><span>1</span><a href="#">&gt;</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 尾部 -->
        <div class="footer"></div>
        <script src="./js/jquery-3.5.1.js"></script>
        <script src="./js/detailgood.js"></script>
        <!-- <script src="./js/detail-tab.js"></script> -->
        <script src="./js/layer/layer.js"></script>
</body>

</html>
<script>
//     if (window.location.search.indexOf("?") != -1) {
//         var gid = window.location.search.split("?")[1].split("=")[1];
//         $.ajax({
//             url: "./api/getinfo",
//             headers: {
//                         token: localStorage.getItem("token")
//                     },
//             data: {
//                 gid
//             },
//             dataType: "jsonp", //重点1
//             jsonp: "cb1", //后台接受的变量名称
//             jsonpCallback: "fn" //后台返回回调函数的名称
//         }).then(function (res) {
//             console.log(res);
//             var htmlStr = `
//             <div class="show_left">
//                     <div class="show_left_one">
//                         <ul class="show_onebox">
//                             <li><img src="${res.smallImg[0]}" alt=""></li>
//                             <li><img src="${res.smallImg[1]}" alt=""></li>
//                             <li><img src="${res.smallImg[2]}" alt=""></li>
//                             <li><img src="${res.smallImg[3]}" alt=""></li>
//                             <li><img src="${res.smallImg[4]}" alt=""></li>
//                         </ul>
//                     </div>
//                     <div class="show_oneimg">
//                         <img class="middImg" src="${res.bigImg[0]}" alt="">
//                         <div class="middleArea"></div>
//                     </div>
//                     <div id="bigArea" class="bigArea">
//                         <img id="bigImg" src="${res.bigImg[0]}" />
//                     </div>
//                     <div class="show_left_two">
//                         <div class="left_two_left">
//                             <span>登录分享赢好礼</span>
//                             <a href="#"></a>
//                             <a href="#"></a>
//                             <a href="#"></a>
//                         </div>
//                         <a href="#" class="scyes"><img src="./images/show_left_btn.jpg" alt="">收藏商品</a>
//                     </div>
//                 </div>
//                 <!-- 中间 -->
//                 <div class="show_center">
//                     <h3>${res.name}</h3>
//                     <p class="show_center_p1">低度飞天 品质依旧</p>
//                     <div class="proceBox">
//                         <div class="newPriceBox">
//                             <p>活动价<span class="newPriceBox_span1">￥</span><span class="newPriceBox_span2">${res.price}</span></p>
//                             <p class="newPriceBox_p"><span>促销信息</span><span class="newPriceBox_span3">限时抢购</span></p>
//                         </div>
//                     </div>
//                     <div class="upmsg">
//                         <div class="transTo">
//                             <div class="psz">配送至：</div>
//                             <a href="#">
//                                 <label for="">上海</label>
//                             </a>
//                             <span class="upmsg_span1">单笔订单不满100元，收运费10元</span>
//                             <img src="./images/upmsg01.jpg" alt="">
//                             <span>满百包邮</span>
//                         </div>
//                         <div class="pay">
//                             <p>关注度<em>13874</em></p>
//                             <p>累计评价<a href="#">1</a href="#"></p>
//                             <p class="border_none">送积分<span>739</span></p>
//                         </div>
//                         <div class="numbox">
//                             <div class="count">数量:</div>
//                             <div class="numbtn">
//                                 <input type="text" id="txt" class="num" value="1">
//                                 <div class="btn">
//                                     <button class="add">+</button>
//                                     <button class="jian">-</button>
//                                 </div>
//                             </div>
//                         </div>
//                         <div class="btnbox">
//                             <a href="#" class="addCat">立即购买</a>
//                             <a href="#" class="addToCat" data-info=${JSON.stringify(res)}><em></em>加入购物车</a>
//                             <div class="apphover"><i></i>手机下单更优惠</div>
//                         </div>
//                     </div>
//                 </div>`;
//             $(".mainBox-show").html(htmlStr);

//             FangDaJ();
//             addJian();
//         })
//     }


//    function addJian(){
//     $(".numbox .add").on("click",function(){
//         let count =$(this).parent().prev().val();
//         count++;
//         $(this).parent().prev().val(count);
//     })
//     $(".numbox .jian").on("click",function(){
//         let count =$(this).parent().prev().val();
//         count--;
//         if(count<1){
//             return;
//         }
//         $(this).parent().prev().val(count);
//     })
//    }

//     $(function () {
//         $(".mainBox-show").on("click", ".addToCat", function () {
            

//             var data = $(this).data('info');
//             console.log(data);
//             delete (data.bigImg);
//             delete (data.smallImg);
//             //添加购买数量
//             data.num = $(".mainBox .num").val();
//             // console.log(data.num)
//             if(!JSON.parse(localStorage.getItem("user"))){
//                 layer.alert("请先登录");
//                 return;
//             }
//             //添加购物人
//             data.uid = JSON.parse(localStorage.getItem("user")).uId
            
//             console.log(data)
//             //把data 通过ajax发送到 后台
//             $.ajax({
//                 url: "./api/addCart",
//                 type: "post",
//                 headers: {
//                         token: localStorage.getItem("token")
//                     },
//                 data: data,
//             }).then(function (res) {
//                 console.log(res);
//                 layer.alert(res.msg)
                
//             })

//         })
//     })
//     // 放大镜
//     function FangDaJ() {
//         $(".show_oneimg").on("mouseenter", function () {
//             // console.log("111")
//             $(this).find('.middleArea').show();
//             $(this).next().show();
//             //鼠标在小区域内移动
//             $(this).on("mousemove", function (e) {
//                 // 获得当前鼠标坐标
//                 var disX = e.pageX;
//                 var disY = e.pageY;
//                 //计算边界
//                 var mX = disX - $(this).offset().left - $(this).find(".middleArea").width() / 2;
//                 var mY = disY - $(this).offset().top - $(this).find(".middleArea").height() / 2
//                 if (mX <= 0) {
//                     mX = 0
//                 }
//                 if (mX >= $(this).width() - $(this).find(".middleArea").width()) {
//                     mX = $(this).width() - $(this).find(".middleArea").width();
//                 }
//                 if (mY <= 0) {
//                     mY = 0;
//                 }
//                 if (mY >= $(this).height() - $(this).find(".middleArea").height()) {
//                     mY = $(this).height() - $(this).find(".middleArea").height();
//                 }
//                 // 移动的比例  小区域移动一丢丢,大图 反正移动n倍数
//                 var oScale = $(".bigArea").width() / $(".middleArea").width();
//                 //大图
//                 $("#bigImg").css({ top: -mY * oScale, left: -mX * oScale });
//                 // 小图区域
//                 $(".middleArea").css({ top: mY, left: mX });
//                 // $(".middImg").css({top:-mY,left:-mX});
//             })
//         })
//         $(".show_oneimg").on("mouseleave", function () {
//             $(this).find(".middleArea").hide();
//             $(this).next().hide();
//         })

//         $(".show_left_one").on("mouseenter", "li", function () {
//             // var $index = $(this).index() + 1;
//             // console.log($index);
//             // $(".show_oneimg").find("img").attr("src", `./images/show_one00${$index}.jpg`);
//             // $(".bigArea").find("img").attr("src", `./images/show_one00${$index}.jpg`)
//             $(".show_oneimg img").attr("src",$(this).find("img").attr("src"));
//             $(".bigArea img").attr("src",$(this).find("img").attr("src"));
//         })
    
//     }
</script>